<template>
    <div style="height: 100%;width: 100%;display: flex">
        <div class="div-heatmap"></div>
        <div class="radio-list">
            <el-radio v-model="currentSituation" v-for="item in situationList" :label="item.id" border>{{item.label}}
            </el-radio>
        </div>
        <div class="left-detail">
            <p class="score-span">场景匹配度：<span >{{details.score}}</span></p>
            <p>装备类别：{{details.typeChi}}</p>
            <p>装备描述：{{details.detail}}</p>
            <p>UUID：{{details.uuid}}</p>
            <p>时间：{{details.time}}</p>
            <div class="attr-50">
                <p>经度：{{details.longitude.toFixed(3)}}</p>
                <p>纬度：{{details.latitude.toFixed(3)}}</p>
            </div>
            <div class="buttom-block">
                <p>指挥控制关系：{{details.time}}</p>
                <p>支援辅助：{{details.time}}</p>
                <p>战场环境：<span style="color: #FF5E5E">对我有利</span></p>
                <div class="download-btn">
                    <el-button class="download-btn"  @click="downloadDesc">场景文字描述</el-button>
                    <el-button class="download-btn" @click="downloadStrategy">场景应对策略</el-button>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
    import planeImg from "./../assets/imgs/icon_plane.png";
    import Track from './../assets/utils/Track'
    import * as request from "../http/request.js"
    import blueShip from "./../assets/imgs/navigation-log/blueShip.png";
    import blueaircraft from "./../assets/imgs/navigation-log/blueaircraft.png";
    import zhiyuanfeiji from "./../assets/imgs/situation/feiji1.png";
    import xietongfeiji from "./../assets/imgs/situation/feiji2.png";
    import zhiyuanjian from "./../assets/imgs/situation/chuna2.png";
    import xietongjian from "./../assets/imgs/situation/chuna3.png";

    import * as Cesium from 'cesium/Cesium'
    import 'cesium/Widgets/widgets.css'

    export default {
        name: 'situationHistory',
        data() {
            return {
                currentSituation: 1,
                situationList: [{
                    label: '当前场景详情',
                    id: 1
                }, {
                    label: '历史场景一',
                    id: 2
                }, {
                    label: '历史场景二',
                    id: 3
                }],
                details: {
                    score: '90%',
                    name: '多巴博斯',
                    chineseName: '多巴博斯',
                    latitude: 13.75943,
                    longitude: 139.34537,
                    type: "opendata",
                    categories: "aircraft",
                    typeChi: "保障辅助舰艇",
                    uuid: "367837000",
                    speed: 5.8000001900000008,
                    name: "能力号海洋监视船",
                    flightLine: "367837000_1687866233",
                },
                relatedPoint: {
                    mainPoint: {
                        latitude: 13.75943,
                        longitude: 139.34537,
                        name: '我是当前主要的装备',
                        type: "zhihuijian"
                    },
                    relatedPoint: [{
                        relation: '协同',
                        name: "飞机1",
                        latitude: 17.75943,
                        longitude: 149.34537,
                        type: "zhiyuanfeiji"
                    }, {
                        relation: '支援',
                        name: "飞机1",
                        latitude: 15.75943,
                        longitude: 130.34537,
                        type: "xietongfeiji"
                    }, {
                        relation: '协同',
                        name: "飞机1",
                        latitude: 9.75943,
                        longitude: 136.34537,
                        type: "zhiyuanjian"
                    }, {
                        relation: '支援',
                        name: "飞机1",
                        latitude: 11.75943,
                        longitude: 129.34537,
                        type: "xietongjian"
                    }]
                }
            }
        },
        mounted() {
            viewer.entities.removeAll()
            this.showMapScene()
        },
        methods: {
            showMapScene() {
                viewer.entities.add({
                    name: this.relatedPoint.mainPoint.name,
                    position: Cesium.Cartesian3.fromDegrees(this.relatedPoint.mainPoint.longitude, this.relatedPoint.mainPoint.latitude),
                    billboard: {
                        //图标
                        image: blueShip,
                        width: 18,
                        height: 23,
                    },
                });

                let data = this.relatedPoint.relatedPoint
                for (let i = 0; i < data.length; i++) {
                    viewer.entities.add({
                        name: data[i].name,
                        position: Cesium.Cartesian3.fromDegrees(data[i].longitude, data[i].latitude),
                        billboard: {
                            //图标
                            image: xietongjian,
                            width: 18,
                            height: 23,
                        },
                    });
                    viewer.entities.add({
                        name: "航迹线",
                        polyline: {
                            positions: Cesium.Cartesian3.fromDegreesArray([data[i].longitude, data[i].latitude,this.relatedPoint.mainPoint.longitude, this.relatedPoint.mainPoint.latitude]),
                            width: 5,
                            arcType: Cesium.ArcType.RHUMB,
                            material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.fromCssColorString('#fff')),
                            clampToGround: true
                        }
                    })
                }


            },
            downloadDesc() {
                window.open()   //文档地址
            },
            downloadStrategy() {
                window.open()   //文档地址
            },
        }
    }
</script>

<style lang="scss">
    $item-bg-color: rgba(0, 78, 126, .8);
    $item-bg-color2: rgba(27, 107, 156, .8);
    $text-color: #ffffff;
    #map3View {
        width: 100%;
        height: 100%;
    }

    .div-heatmap {
        width: 600px;
        height: 400px;
        display: none;
    }

    .radio-list {
        position: absolute;
        top: 30px;
        left: 30px;

        .el-radio {
            margin: 5px;
        }

        .el-radio.is-bordered {
            color: #fff;
            background: url("../assets/imgs/situation/changjing2.png");
            background-size: 100% 100%;
            border: none;
            height: auto;
            padding: 10px;
        }

        .el-radio.is-bordered.is-checked {
            background: url("../assets/imgs/situation/changjing1.png");
            background-size: 100% 100%;
        }

        .el-radio__input.is-checked + .el-radio__label {
            font-family: PingFang SC;
            font-weight: 600;
            color: #fff;
        }
    }

    .left-detail {
        position: absolute;
        top: 100px;
        left: 30px;
        min-width: 300px;
        background: url("../assets/imgs/situation/details.png");
        background-size: 100%;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        padding: 30px 10px 10px 10px;

        .score-span{
            margin-top: 10px;
            background: url("../assets/imgs/situation/xiangqingjieshao_bg.png");
            background-size: 100%;
            font-size: 16px;
            span {
                color: #3CF479
            }
        }
        .attr-50 {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;

            p {
                width: 45%;
            }
        }

        p {
            margin: 4px;
            font-size: 12px;
            text-align: left;
        }
        .buttom-block{
            background: url("../assets/imgs/situation/xiangqingjieshao_bg2.png");
            background-size: 100%;
            padding-top: 10px;
            .download-btn {
                margin: 10px;

                .el-button {
                    background: url("../assets/imgs/situation/download_btn.png");
                    background-size: 100% 100%;
                    color: #fff;
                    padding: 5px 10px 5px 30px;
                    font-size: 12px;
                }
            }
        }

    }

</style>
